<template>
  <div class="app-container">
    <git-navigation />
    <el-col :span="22" :offset="1">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item>
          <el-link :underline="false" type="primary" @click="setWip">标题以 WIP:</el-link>开头将合并请求标识为 正在处理中 表示其还未准备好可以接受合并.
          <br>
        </el-form-item>
        <el-form-item label="描述">
          <template>
            <div>
              <mavon-editor
                ref="md"
                v-model="form.desc"
                style="min-height: 400px"
                @change="change"
              />
            </div>
          </template>
        </el-form-item>
        <el-form-item label="指派">
          <el-select
            v-model="form.assigneeId"
            v-loading="assigneeLoading"
            multiple
            placeholder="Assignee"
            style="width: 30%"
          >
            <el-option
              v-for="item in projectMembers"
              :key="item.id"
              :label="filterAssign(item)"
              :value="item.id"
            />
          </el-select>&nbsp;
          <el-link :underline="false" type="primary" @click="assignMe">指派给我</el-link>
        </el-form-item>
        <el-form-item label="标记">
          <el-select
            v-model="form.labels"
            v-loading="labelLoading"
            multiple
            placeholder="标记"
            style="width: 30%"
          >
            <el-option v-for="item in labelList" :key="item.name" :value="item.name">
              <div :style="item | styleFilter" />
              {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源分支">
          <el-input v-model="form.sourceBranch" disabled style="width: 30%" />
        </el-form-item>
        <el-form-item label="目标分支">
          <el-input v-model="form.targetBranch" disabled style="width: 30%" />
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="form.removeSourceBranch"
            label="Delete source branch when merge request is accepted"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="form.squash"
            title="Squashing lets you tidy up the commit history of a branch when accepting a merge
request. It applies all of the changes in the merge request as a single commit,
and then merges that commit using the merge method set for the project."
            label="Squash commits when merge request is accepted."
          />
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="createMerged">提交合并请求</el-button>
          <el-button @click="cancleMerge">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>

<script>
import GitNavigation from './components/GitNavigation';
import { mavonEditor } from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
import { getData, postData } from '@/api/requestData';

export default {
  components: {
    GitNavigation,
    mavonEditor
  },
  filters: {
    filterLabel(item) {
      return item.color;
    },
    styleFilter(v) {
      const sty =
        'display:inline-block;margin-right:3px;width: 10px;height: 10px;background-color:' +
        v.color;
      return sty;
    }
  },
  data() {
    return {
      pid: this.$route.params.pid,
      pname: this.$route.params.projectName,
      wip: false, // 设置WIP开头
      form: {
        title: '',
        desc: '',
        assigneeId: [],
        labels: [],
        sourceBranch: '',
        targetBranch: '',
        removeSourceBranch: false,
        squash: false
      },
      projectMembers: [],
      assigneeLoading: true,
      labelList: [],
      labelLoading: true,
      currentGitUid: 0
    };
  },
  created() {
    const targetBranch = this.$route.query.targetBranch;
    this.form.targetBranch = targetBranch;
    this.form.sourceBranch = this.$route.query.sourceBranch;
    this.form.title = targetBranch.replace(
      targetBranch[0],
      targetBranch[0].toUpperCase()
    );
  },
  mounted() {
    this.getAssignAndLabels();
  },
  methods: {
    filterAssign(row) {
      return row.username + '/' + row.name;
    },
    assignMe() {
      this.form.assigneeId = [this.currentGitUid];
    },
    getAssignAndLabels() {
      getData('/git/project/member/' + this.pid)
        .then((response) => {
          this.projectMembers = response.data.memberList;
          this.currentGitUid = response.data.currentGitUid;
          this.assigneeLoading = false;
          getData('/git/public/project/labels/' + this.pid)
            .then((res) => {
              this.labelList = res.data;
              this.labelLoading = false;
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    setWip() {
      // 未设置
      if (!this.wip) {
        this.form.title = 'WIP:' + this.form.title;
        this.wip = true;
      } else {
        this.form.title = this.form.title.replace('WIP:', '');
        this.wip = false;
      }
    },
    change(value, render) {
      // render 为 markdown 解析后的结果[html]
      this.html = render;
    },
    cancleMerge() {
      this.$router.go(-1);
    },
    createMerged() {
      this.form.labels = this.form.labels.join(',');
      this.form.assigneeId = this.form.assigneeId.join(',');
      if (this.form.title === '') {
        this.$message.error('标题必填');
        return;
      }
      postData('/git/public/create/merge/' + this.pid, this.form).then(
        (response) => {
          this.$message.success(response.message);
          this.$router.push({
            path: '/git/merged/list/' + this.pname + '/' + this.pid
          });
        }
      );
    }
  }
};
</script>

<style scoped>
</style>
